#Title{ font-size: clamp(1.2rem, 4vw, 4rem); padding-left: 6; margin-top: 10vh; margin-bottom: 70vh; margin-left: 2vw; margin-right: 60vw; height: 20vh; text-align: left; } .textBox{ text-align: center; font-size: clamp(1rem, 1.2vw, 3rem); padding: 1.3vh; margin-top: 8vh; margin-bottom: 8vh; margin-left: 10vw; margin-right: 10vw; } .profileImage{ width: 30vw; height: 30vw; text-align: center; } #galleryHeader{ margin-left: 30vw; margin-right: 30vw; border-radius: 5px; font-size: clamp(1rem, 1.2vw, 3rem); } .gallery{ display: flex; margin-left: 10vw; margin-right: 10vw; height: 19vh; margin-bottom: 0vh; transition: margin-bottom 0.5s; justify-content: space-evenly; } .gallery:hover{ margin-bottom: 36vh; } .galleryItem{ height: 100%; } .galleryItem:hover + .galleryPopup{ visibility: visible; opacity: 1; } .galleryItem:hover .popupTongue{ visibility: visible; opacity: 1; } .galleryPopup:hover{ visibility: visible; opacity: 1; } .galleryPopup:hover .popupTongue{ visibility: visible; opacity: 1; } .galleryPopup{ visibility: hidden; opacity: 0; display: flex; z-index: 5; position: absolute; background-color: #ffd256; border-radius: 2px; color: #181818; width: 78.5vw; height: 19vh; transition: visibility 0.3s, opacity 0.5s; margin-top: 20.85vh; } .popupTongue{ visibility: hidden; opacity: 0; transition: visibility 0.3s, opacity 0.5s; width: 1.85vh; height: 1.85vh; margin-left: 5vw; } .popupImage{ padding: 10px; } .popupTextContainer{ display: flex; flex-direction: column; padding: 6px; } .galleryImage{ width: 100%; height: 100%; } .galleryImageContainer{ height: 100%; width: 100%; display: block; } .galleryTitle{ font-weight: 700; } #galleryOutroLink{ text-align: center; margin-top: 5vh; } #outroText{ margin-top: 12vh; margin-bottom: 20vh; margin-left: 27vw; margin-right: 27vw; }